<template>
  <el-container>
    <el-container>
      <!-- 侧边栏 -->
      <el-aside class="nav" :style="{ height: windowHeight, width: changeW }">
        <el-menu
          default-active="1-1"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="rgb(38,52,69)"
          text-color="#fff"
          active-text-color="#ffd04b"
          router
        >
          <el-submenu index="1" class="nav_title">
            <template slot="title">
              <i class="el-icon-s-help"></i>
              <span>问诊管理</span>
            </template>
            <el-menu-item index="3-1" :route="{ path: '/User/illnessDescribe' }"
              ><i class="el-icon-s-check"></i>在线复诊</el-menu-item
            >
            <el-menu-item index="3-2" :route="{ path: '/User/evaluation' }"
              ><i class="el-icon-suitcase"></i>续方购药</el-menu-item
            >
          </el-submenu>
          <el-menu-item index="2" :route="{ path: '/manage/test' }">
            <i class="el-icon-first-aid-kit"></i>
            <span slot="title">药品订单管理</span>
          </el-menu-item>
          <el-menu-item index="3">
            <i class="el-icon-menu"></i>
            <span slot="title">医生管理</span>
          </el-menu-item>
          <el-submenu index="4" class="nav_title">
            <template slot="title">
              <i class="el-icon-shopping-cart-1"></i>
              <span>财务管理</span>
            </template>
            <el-menu-item index="4-1" :route="{ path: '/User/illnessDescribe' }"
              ><i class="el-icon-shopping-cart-2"></i>问诊订单</el-menu-item
            >
            <el-menu-item index="4-2" :route="{ path: '/User/evaluation' }"
              ><i class="el-icon-notebook-2"></i>处方订单</el-menu-item
            >
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-s-help"></i>
              <span>运营管理</span>
            </template>
            <el-menu-item index="5-1" :route="{ path: '/User/illnessDescribe' }"
              ><i class="el-icon-chat-line-round"></i>评价</el-menu-item
            >
            <el-menu-item index="5-2" :route="{ path: '/User/evaluation' }"
              ><i class="el-icon-postcard"></i>热门医生</el-menu-item
            >
            <el-menu-item index="5-3" :route="{ path: '/User/illnessDescribe' }"
              ><i class="el-icon-chat-line-square"></i>健康资讯</el-menu-item
            >
          </el-submenu>
          <el-menu-item index="6">
            <i class="el-icon-s-custom"></i>
            <span slot="title">就诊人管理</span>
          </el-menu-item>
          <el-submenu index="7" class="nav_title">
            <template slot="title">
              <i class="el-icon-s-grid"></i>
              <span>药品管理</span>
            </template>
            <el-menu-item index="7-1" :route="{ path: '/manage/j_AllPrescription' }"
              ><i class="el-icon-search"></i>药品查询</el-menu-item
            >
            <el-menu-item index="7-2" :route="{ path: '/manage/j_AddDrugs' }"
              ><i class="el-icon-document-add"></i>新增药品</el-menu-item
            >
          </el-submenu>
          <el-submenu index="8">
            <template slot="title">
              <i class="el-icon-message"></i>
              <span>药房管理</span>
            </template>
            <el-menu-item index="8-1" :route="{ path: '/manage/no' }"
              ><i class="el-icon-message"></i>互联网药房</el-menu-item
            >
            <el-menu-item index="8-2" :route="{ path: '/manage/no' }"
              ><i class="el-icon-message"></i>院内药房</el-menu-item
            >
            <el-menu-item index="8-3" :route="{ path: '/manage/no' }"
              ><i class="el-icon-message"></i>药品挂靠</el-menu-item
            >
          </el-submenu>
          <el-submenu index="9">
            <template slot="title">
              <i class="el-icon-message"></i>
              <span>系统管理</span>
            </template>
            <el-menu-item index="9-1" :route="{ path: '/manage/no' }"
              ><i class="el-icon-message"></i>角色及权限</el-menu-item
            >
            <el-menu-item index="9-3" :route="{ path: '/manage/no' }"
              ><i class="el-icon-message"></i>人员管理</el-menu-item
            >
            <el-menu-item index="9-4" :route="{ path: '/manage/no' }"
              ><i class="el-icon-message"></i>疾病管理</el-menu-item
            >
            <el-menu-item index="9-5" :route="{ path: '/manage/no' }"
              ><i class="el-icon-message"></i>科室管理</el-menu-item
            >
            <el-menu-item index="9-6" :route="{ path: '/manage/no' }"
              ><i class="el-icon-message"></i>短信模板</el-menu-item
            >
            <el-menu-item index="9-7" :route="{ path: '/manage/no' }"
              ><i class="el-icon-message"></i>消息模板</el-menu-item
            >
            <el-menu-item index="9-8" :route="{ path: '/manage/no' }"
              ><i class="el-icon-message"></i>日志</el-menu-item
            >
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main class="content" :style="{ height: windowHeight }">
        <div class="content_header">
          <el-row>
            <el-col :span="1">
              <div class="change_nav" @click="changeNav">
                <i
                  v-if="isShow"
                  style="font-size: 30px"
                  class="el-icon-s-fold"
                ></i>
                <i v-else style="font-size: 30px" class="el-icon-s-unfold"></i>
              </div>
            </el-col>
            <el-col :span="18"> &nbsp; </el-col>
            <el-col :span="5">
              <el-row>
                <el-col :span="3">
                  <i style="font-size: 20px" class="el-icon-user-solid"></i>
                </el-col>
                <el-col :span="10"> momo.zxy </el-col>
                 <el-col :span="3">
                  <div class="nav_home" title="首页">
                    <i  style="cursor: pointer; font-size: 20px" class="el-icon-s-home"></i>
                  </div>
                </el-col>
                <el-col :span="3">
                  <div class="edit" title="退出">
                    <i
                      style="cursor: pointer; font-size: 20px"
                      class="el-icon-switch-button"
                    ></i>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
        <hr style="margin-bottom:20px">  
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
export default {
  name: "Main",
  data: function () {
    return {
      // activeNames: ["1"],
      isShow: true,
      windowHeight: 0,
      changeW: "200px",
    };
  },
  methods: {
    handleChange(val) {
      console.log(val);
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    changeNav() {
      this.isShow = !this.isShow;
      if (this.isShow) {
        this.changeW = "200px";
      } else {
        this.changeW = "0";
      }
    },
  },
  created() {
    this.windowHeight = window.innerHeight + "px";
    let that = this;
    window.onresize = function () {
      that.windowHeight = window.innerHeight + "px";
    };
  },
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.content_header{

  // background-color: gray;
}
.content_header_icon {
  background-color: red;
  border-radius: 50%;
}
.edit {
  text-align: center;
}
.edit :hover {
  color: blue;
}
.nav_home{
  text-align: center;
}
.nav_home :hover {
  color: blue;
}
.nav_title {
  overflow: hidden;
}
.nav {
  background-color: rgb(43, 56, 73);
  box-sizing: border-box;
  overflow-x: hidden;
}
.change_nav {
  cursor: pointer;
  // text-align: center;
}
.el-menu {
  border: none;
}
.nav_icon {
  padding-right: 20px;
  color: white;
  font-size: 20px;
}
.content {
  background-color: rgb(245, 243, 243);
  overflow-y: scroll;
  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  ::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    background-color: #f5f5f5;
  }
  .el-menu-item,
  .el-submenu__title {
    height: 57px;
  }
  /*定义滚动条轨道 内阴影+圆角*/
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #f5f5f5;
  }

  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #c8c8c8;
  }
}
.el-menu-item,
.el-submenu {
  line-height: 54px;
}
</style>

